<template>
  <div class="dashboard-container">
    <div class="app-container">
      <page-tools :show-before="true">
        <span slot="before">共{{ page.total }}条记录</span>
        <template slot="after">
          <el-button size="small" type="warning" @click="$router.push('/import')">导入</el-button>
          <el-button size="small" type="danger" @click="export2excel">导出</el-button>
          <el-button size="small" type="primary">新增员工</el-button>
        </template>
      </page-tools>
      <!-- 放置表格和分页 -->
      <el-card v-loading="loading">
        <el-table border :data="list">
          <el-table-column label="序号" sortable="" type="index" />
          <el-table-column label="姓名" sortable="" prop="username" />
          <el-table-column label="工号" sortable="" prop="workNumber" />
          <el-table-column label="聘用形式" sortable="" prop="formOfEmployment" :formatter="formatEmployment" />
          <el-table-column label="部门" sortable="" prop="departmentName" />
          <el-table-column label="入职时间" sortable="">
            <template slot-scope="scope">
              {{ scope.row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="账户状态" sortable="">
            <template slot-scope="scope">
              <el-switch :value="scope.row.enableState === 1" />
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template slot-scope="{row}">
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small">角色</el-button>
              <el-button type="text" size="small" @click="delEmployee(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination

            layout="sizes, total, prev, pager, next, jumper"

            :page-size="page.size"
            :total="page.total"

            :page-sizes="[2,5,10,50]"
            @size-change="sizeChange"

            @current-change="currentChange"
          />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getEmployeeList, delEmployee } from '@/api/employees'
import EnumEmployees from '@/api/constant/employees'
// 我们需要用到过滤器函数中处理日期的功能, 但是又不是作为过滤器使用
// 单独引入函数, 将它当做普通函数使用即可
import { formatDate } from '@/filters'

// 不希望每次用到都重新引入和注册
// 干脆注册全局组件即可
// import PageTools from '@/components/PageTools'
export default {
  // components: {
  //   PageTools
  // }
  data() {
    return {
      list: [],
      page: {
        page: 1,
        size: 2,
        total: 0
      },
      loading: false
    }
  },
  created() {
    this.getEmployeeList()
  },
  methods: {
    async getEmployeeList() {
      // 获取数据并且进行解构
      this.loading = true
      const { rows, total } = await getEmployeeList(this.page)
      this.list = rows
      this.page.total = total
      console.log(this.list)
      this.loading = false
    },
    currentChange(newPage) {
      this.page.page = newPage
      this.getEmployeeList()
    },
    sizeChange(newSize) {
      this.page.size = newSize
      this.getEmployeeList()
    },
    formatEmployment(row, column, cellValue, index) {
      // 这是一个列的格式化函数
      // 对每个格子都会调用,
      // 将当前格子的数据作为参数自动传入
      // 只需要在这返回一个数据即可替换掉原来的显示
      // 如果只是想要转换文字, 写死的话技术上完全 ok
      // 为了管理方便, 会统一定义枚举数据, 需要的地方拿进来使用
      // return cellValue === 1 ? '正式' : '非正式'
      const obj = EnumEmployees.hireType.find(item => item.id === cellValue)
      // 这里用三元表达式做一个保险的操作
      // 万一是枚举数据中不存在的类型, 显示未知
      return obj ? obj.value : '未知'
    },
    export2excel() {
      // 这里每当点击导出按钮，按需加载导出组件
      import('@/vendor/Export2Excel').then(async(excel) => {
        // 按需加载是一个 promise 成功后的 .then
        // 可以接受到一个对象参数， 里面包裹着所有这个文件暴露的属性
        // console.log('按需加载成功')
        // console.log(excel)
        // 尝试使用基本的数据结构导出文件
        // const header = ['姓名', '年龄', '性别']
        // const data = [
        //   ['jack', 11, '男'],
        //   ['rose', 22, '女'],
        //   ['tom', 33, '男'],
        //   ['jerry', 44, '男']
        // ]
        // 1. 加载所有员工数据
        const { rows } = await getEmployeeList({ page: 1, size: this.page.total })
        // 2. 准备字典
        const headerDict = {
          '姓名': 'username',
          '手机号': 'mobile',
          '入职日期': 'timeOfEntry',
          '聘用形式': 'formOfEmployment',
          '转正日期': 'correctionTime',
          '工号': 'workNumber',
          '部门': 'departmentName'
        }
        // 3. 根据字典生成表头
        const header = Object.keys(headerDict)
        console.log('表头')
        console.log(header)
        console.log('所有员工的原始数据')
        console.log(rows)
        // 我们的 api 获取的数据是数组套对象
        // [{mobile:'13222222222', username: '孙才'}]
        // 最终想要的呢是,数组套数组
        // [['孙才', '13222222222']]
        // 所以我们需要遍历原数组, 每个员工对象都做一个转换
        // 4. 遍历所有员工转换成功数组成功
        const newUserArray = rows.map(user => {
          // 这里相信之前已经创建了一个将用户对象转成用户数组的函数
          // 直接拿来用, 遍历所有的员工, 都变成数组形式
          return this.array2obj(user, headerDict)
        })
        console.log('员工数组套对象的形式转换成数组套数组的形式')
        console.log(newUserArray)
        // 5. 生成文件
        excel.export_json_to_excel({
          header,
          data: newUserArray
        })
      })
    },
    array2obj(user, dict) {
      // 1. 创建一个数组, 准备存放用户数据
      const arr = []
      console.log(user)
      // 2. 按顺序遍历表头
      for (const key in dict) {
        // 3. 拿到表头中文对应的英文 key
        const enKey = dict[key]
        // 4. 用对应英文 key 在用户数据中拿值放入数组中
        // 之前将 value 直接拿到即可,现在由于需要独立处理聘用形式和时间格式
        // 需要进行判断
        let value = user[enKey]
        if (enKey === 'timeOfEntry' || enKey === 'correctionTime') {
          value = formatDate(value)
          if (value === '1970-01-01') {
            value = '未知'
          }
        } else if (enKey === 'formOfEmployment') {
          const obj = EnumEmployees.hireType.find(item => item.id === value)
          value = obj ? obj.value : '未知'
        }
        arr.push(value)
      }
      console.log(arr)
      return arr
    },
    async delEmployee(id) {
      try {
        // 二次确认
        await this.$confirm('是否确认删除？')
        // 发请求
        await delEmployee(id)
        // 重新加载数据
        this.getEmployeeList()
        // 提示用户
        this.$message.success('操作成功')
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style>

</style>
